<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>
    <script src="${ctxStatic}/layui/echarts.js" type="text/javascript"></script>
    <script type="text/javascript">

        document.addEventListener('plusready', function(){
            //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"


        });

    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#smap").click(function () {
                var ss ="${ids}";
                $.ajax({
                    type: "POST",
                    url: "${ctw}/api/firm/tonji",
                    data: {"officeId":ss},
                    dataType: "json",
                    success: function(shu){
                        console.log(shu);
                        var zt = [];
                        var sums = [];
                        var myChart = echarts.init(document.getElementById('smap'));
                        for (var key in shu) {
                            zt.push(key);
                            sums.push(shu[key]);
                        }
                        var zt1 = ["待回访","报案未回访","已回访待受理","已受理","超期未结案","已结案","已撤件"];
                        console.log(zt);
                        console.log(sums);
                        var option = {
                            title: {
                                text: '当前机构案件统计 单位：件',
                            },
                            tooltip : {
                                trigger: 'axis',
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                },
                                formatter: function (params) {
                                    var tar = params[1];
                                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type : 'category',
                                splitLine: {show:false},
                                data : zt1,
                                axisLabel:{
                                    interval:0,
                                    rotate:-25,
                                }
                            },
                            yAxis: {
                                type : 'value'
                            },
                            series: [
                                {
                                    name: '辅助',
                                    type: 'bar',
                                    stack:  '总量',
                                    itemStyle: {
                                        normal: {
                                            color: function (params){
                                                var colorList = [
                                                    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                                ];
                                                return colorList[params.dataIndex]
                                            },
                                            //以下为是否显示
                                            label: {
                                                show: true
                                            }
                                        }
                                    },
                                    data: [0, 0, 0, 0, 0, 0,0,0]
                                },
                                {
                                    name: '数量',
                                    type: 'bar',
                                    stack: '总量',
                                    itemStyle: {
                                        normal: {
                                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                            color: function(params) {
                                                // build a color map as your need.
                                                var colorList = [
                                                    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                                    '#FE8463'
                                                ];
                                                return colorList[params.dataIndex]
                                            },
                                            //以下为是否显示，显示位置和显示格式的设置了
                                            label: {
                                                show: true,
                                                position: 'top',
                                                formatter: '{b}\n{c}'
                                            }
                                        }
                                    },
                                    data:sums
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                })

            })
            $("#smap").trigger("click");
        });
    </script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
</head>
<body>
    <div class="weui-form-preview" id="smap" style="height: 350px; width: 95%;margin-top: 20% ">
        <%--<div class="weui-form-preview__hd">--%>
            <%--<label class="weui-form-preview__label">机构名称</label>--%>
            <%--<em class="weui-form-preview__value">${tjlist.name}</em>--%>
        <%--</div>--%>
        <%--<div class="weui-form-preview__bd">--%>
            <%--<div class="weui-form-preview__item">--%>
                <%--<label class="weui-form-preview__label">总案件</label>--%>
                <%--<span class="weui-form-preview__value">${tjlist.num}</span>--%>
            <%--</div>--%>
            <%--<div class="weui-form-preview__item">--%>
                <%--<label class="weui-form-preview__label">已报案</label>--%>
                <%--<span class="weui-form-preview__value">${tjlist.st1}</span>--%>
            <%--</div>--%>
            <%--<div class="weui-form-preview__item">--%>
                <%--<label class="weui-form-preview__label">报案未回访</label>--%>
                <%--<span class="weui-form-preview__value">${tjlist.st2}</span>--%>
            <%--</div>--%>
            <%--<div class="weui-form-preview__item">--%>
                <%--<label class="weui-form-preview__label">已回访待受理</label>--%>
                <%--<span class="weui-form-preview__value">${tjlist.st3}</span>--%>
            <%--</div>--%>
            <%--<div class="weui-form-preview__item">--%>
                <%--<label class="weui-form-preview__label">已受理</label>--%>
                <%--<span class="weui-form-preview__value">${tjlist.st4}</span>--%>
            <%--</div>--%>
            <%--<div class="weui-form-preview__item">--%>
                <%--<label class="weui-form-preview__label">未结案</label>--%>
                <%--<span class="weui-form-preview__value">${tjlist.st5}</span>--%>
            <%--</div>--%>
            <%--<div class="weui-form-preview__item">--%>
                <%--<label class="weui-form-preview__label">已结案</label>--%>
                <%--<span class="weui-form-preview__value">${tjlist.st6}</span>--%>
            <%--</div>--%>
            <%--&lt;%&ndash;<div class="weui-form-preview__item">&ndash;%&gt;--%>
                <%--&lt;%&ndash;<label class="weui-form-preview__label">已sd</label>&ndash;%&gt;--%>
                <%--&lt;%&ndash;<span class="weui-form-preview__value">${tjlist.id}</span>&ndash;%&gt;--%>
            <%--&lt;%&ndash;</div>&ndash;%&gt;--%>
        <%--</div>--%>
        <%--<div class="weui-form-preview__ft">--%>
            <%--<!-- <a class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:">辅助操作</a>-->--%>
            <%--<button type="button" class="weui-form-preview__btn weui-form-preview__btn_primary tijiao" href="javascript:void(0)"  data-id="${tjlist.id}">查看</button>--%>
        <%--</div>--%>
    </div>
</body>
<script type="text/javascript">
    // $(document).ready(function() {
    //     $(".tijiao").click(function () {
    //         var ss = $(this).data("id");
    //         location.href ='/firm/firm/getMmap?ids='+ss;
    //     })
    // });
</script>
</html>
